<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="friends_table">
        <thead>
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>家乡</td>
                <td>未来想去的城市</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <ul id="container"></ul>
    <script>
        const friends = [
            {index: 1, name: '聂紫祥' , hometown: '南昌', city: '杭州'},
            {index: 2, name: '帅宇翔', hometown: '宜春', city: '深圳'},
            {index: 3, name: '徐毅', hometown: '丰城', city: '杭州'},
            {index: 4, name: '曹善诚',hometown: '南昌',city: '深圳'}
        ];
        // 数组的每一项(对象) -> tr>td>
       
        document.getElementById('friends_table').querySelector('tbody').innerHTML = friends.map(function(friend){
            // console.log(friend);
            return `
            <tr>
            <td>${friend.index}</td>
            <td>${friend.name}</td>
            <td>${friend.hometown}</td>
            <td>${friend.city}</td>
            </tr>
            `
        }).join('')
        // console.log(newFriends,'-----');

        const qiang = {
            name: "刘国强",
            age: 18,
            job: '大厂女程序员的专属鼓励师',
            city: '重庆',
            blo: '写代码就像吃火锅一样爽',
        }

        // const users = ['夏侯欣', '饶乐', '王飞'];
        // let html = '';
        // for (let i = 0; i < users.length; i++){
        //     html += '<li>' + users[i] + '</li>'
        // }

        // users.forEach(function(user, index){
        //     console.log(user, index)
        // })
        // 数组的每一项从字符串编程 变成html的字符串
        // join 把数组的每一项都拼接到一起, 
        // document.getElementById('container').innerHTML = users.map(function(user, index){
        //     // console.log(user, index);
        //     return `<li>${user}</li>`
            
        // }).join('')

        // document.getElementById('container').innerHTML = html;
        // = '<div>' + qiang.name + '</div>'
        // + '<div>' + qiang.age + '</div>'
        // + '<div>' + qiang.job + '</div>'
        // + '<div>' + qiang.city + '</div>'
        // + '<div>' + qiang.blo + '</div>';

        // 字符串 div qiang.blo 变量 模板
        // = `
        // <li>${users.[0]}</li>
               
        // `
    </script>
</body>
</html>